<template>
  <div class="profile-info common-mobile-view">
    <el-form ref="ruleFormRef"
             :model="userStore.userInfo"
             :rules="rules" label-width="auto">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="userStore.userInfo.username"
                  :maxlength="10" show-word-limit
                  clearable/>
      </el-form-item>

      <el-form-item label="头像">
        <upload-image v-model="userStore.userInfo.avatar"
                      :image-limit="1"
                      :service-url="fileServiceUrl"
                      :service-file-root-path="serviceFileRootPath"
                      :image-path="userStore.userImagePath"/>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="userStore.userInfo.gender">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="生日">
        <el-date-picker v-model="userStore.userInfo.birthDate"
                        type="date" :editable="false"
                        placeholder="请选择日期"/>
      </el-form-item>

      <el-form-item label="地区">
        <el-cascader v-model="userStore.userInfo.area"
                     placeholder="请选择地区" :options="pcTextArr">
        </el-cascader>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="userStore.userInfo.phoneNumber"
                  :maxlength="11" show-word-limit clearable
                  placeholder="请输入手机号"/>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="userStore.userInfo.email"
                  :maxlength="20" show-word-limit clearable
                  placeholder="请输入邮箱"/>
      </el-form-item>

      <el-form-item label="地址">
        <el-input v-model="userStore.userInfo.address"
                  :maxlength="20" show-word-limit clearable
                  placeholder="请输入地址"/>
      </el-form-item>

      <el-form-item label="职业">
        <el-input v-model="userStore.userInfo.job"
                  :maxlength="10" show-word-limit clearable
                  placeholder="请输入职业"/>
      </el-form-item>

      <el-form-item label="标签">
        <el-input-tag v-model="userStore.userInfo.tags"
                      :max="3" placeholder="请输入标签（最多3个）" />
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="userStore.userInfo.description"
                  :maxlength="20" show-word-limit clearable
                  placeholder="用一句话描述自己"/>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      <el-button @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UploadImage } from 'vue3-common'
import { pcTextArr } from 'element-china-area-data'
import { useUserStore } from '@/store/user.ts'
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { profileInfoRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'

const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>(profileInfoRules)

const cancelClick = () => {
  history.back()
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await userStore.updateUser()
      await userStore.queryUser()
      ElMessage.success('更改信息成功')
      history.back()
    } else {
      ElMessage.error('请先填写信息')
    }
  })
}
</script>

<style scoped lang="scss">
.profile-info {
  display: flex;
  flex-direction: column;
  gap: 5px;

  .button-container {
    align-self: center;
  }
}
</style>
